import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:smart_devices/components/upkeep/order/order_component.dart';
import 'package:smart_devices/components/upkeep/task/task_component.dart';
import 'package:smart_devices/utils/colors.dart';
import 'package:smart_devices/utils/styles.dart';
import 'package:smart_devices/utils/tools.dart';

import 'record_logic.dart';

class UpkeepRecordView extends GetView<UpkeepRecordLogic> {
  const UpkeepRecordView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(
            Icons.arrow_back_ios,
            color: Colors.white,
            size: 15,
          ),
          onPressed: Get.back,
        ),
        automaticallyImplyLeading: false,
        title: Text(
          '保养记录',
          style: StylesUtils.customTextStyle(
              fontSize: 18, fontWeight: FontWeight.w700),
        ),
        centerTitle: true,
        bottom: BarBottom(
          preferredSize: const Size.fromHeight(100),
          child: Container(
            height: 100,
            decoration: const BoxDecoration(color: Colors.white),
            child: Column(
              children: [
                Expanded(
                    child: Container(
                        alignment: Alignment.center,
                        child: Obx(() => CupertinoSegmentedControl<int>(
                            onValueChanged: (int value) {
                              controller.controlIndex.value = value;
                              controller.pageController.animateToPage(value,
                                  duration: const Duration(milliseconds: 500),
                                  curve: Curves.easeIn);
                            },
                            children: {
                              0: Container(
                                width: 168,
                                height: 30,
                                alignment: Alignment.center,
                                child: Text(
                                  '保养任务',
                                  style: StylesUtils.customTextStyle(
                                      color: getColorByControlIndex(0)),
                                ),
                              ),
                              1: Container(
                                width: 168,
                                height: 30,
                                alignment: Alignment.center,
                                child: Text(
                                  '保养工单',
                                  style: StylesUtils.customTextStyle(
                                      color: getColorByControlIndex(1)),
                                ),
                              )
                            },
                            borderColor: ColorsUtils.parseColorFromHexString(
                                ColorsUtils.color0052),
                            selectedColor: ColorsUtils.parseColorFromHexString(
                                ColorsUtils.color0052),
                            unselectedColor: Colors.white,
                            padding: EdgeInsets.zero,
                            groupValue: controller.controlIndex.value,
                            pressedColor:
                                ColorsUtils.rgba(0, 82, 217, 0.55))))),
                Expanded(
                    child: Container(
                  padding: const EdgeInsets.symmetric(horizontal: 10),
                  decoration: BoxDecoration(
                      border: Border(
                          bottom: BorderSide(
                              color: ColorsUtils.parseColorFromHexString(
                                  ColorsUtils.colorF2f2)))),
                  child: Row(
                    children: [
                      Expanded(
                          child: Obx(() => SizedBox(
                                height: 36,
                                child: TextField(
                                  textDirection: TextDirection.ltr,
                                  controller: TextEditingController(
                                      text: controller.search.value),
                                  cursorColor:
                                      ColorsUtils.parseColorFromHexString(
                                          ColorsUtils.color1c24),
                                  style: StylesUtils.customTextStyle(
                                      fontSize: 16,
                                      color: ColorsUtils.color1c24),
                                  textAlign: TextAlign.left,
                                  textAlignVertical: TextAlignVertical.center,
                                  cursorWidth: 1,
                                  // cursorHeight: 18,
                                  cursorRadius: const Radius.circular(2),
                                  decoration: InputDecoration(
                                      hintText: '请输入任务名称/任务编号/设备名称',
                                      hintStyle: StylesUtils.customTextStyle(
                                          color: ColorsUtils.colorCccc,
                                          fontSize: 13),
                                      isDense: true,
                                      isCollapsed: true,
                                      prefixIcon: Center(
                                        child: ToolsUtils.assetImageSvg(
                                            'u2232.svg',
                                            width: 15,
                                            height: 15),
                                      ),
                                      prefixIconConstraints:
                                          const BoxConstraints.expand(
                                              width: 36, height: 36),
                                      border: OutlineInputBorder(
                                          borderSide: BorderSide(
                                              color: ColorsUtils.parseColorFromHexString(
                                                  ColorsUtils.colorE4e4))),
                                      focusColor:
                                          ColorsUtils.parseColorFromHexString(
                                              ColorsUtils.colorE4e4),
                                      contentPadding: const EdgeInsets.symmetric(
                                          vertical: 18, horizontal: 15),
                                      focusedBorder: OutlineInputBorder(
                                          borderSide: BorderSide(
                                              color: ColorsUtils.parseColorFromHexString(
                                                  ColorsUtils.colorE4e4)))),
                                  onChanged: (String text) {
                                    controller.search.value = text;
                                  },
                                ),
                              ))),
                      Container(
                        width: 60,
                        alignment: Alignment.centerRight,
                        child: TextButton(
                          onPressed: () {},
                          child: Text.rich(TextSpan(children: [
                            WidgetSpan(
                                alignment: PlaceholderAlignment.middle,
                                child: ToolsUtils.assetImageSvg('u2227.svg',
                                    width: 15, height: 15)),
                            TextSpan(
                                text: '筛选',
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.color3333))
                          ])),
                        ),
                      )
                    ],
                  ),
                )),
              ],
            ),
          ),
        ),
      ),
      body: PageView(
        physics: const NeverScrollableScrollPhysics(),
        scrollBehavior: const ScrollBehavior(),
        controller: controller.pageController,
        children: [TaskComponent(), OrderComponent()],
      ),
    );
  }

  String getColorByControlIndex(int i) {
    return i == controller.controlIndex.value
        ? ColorsUtils.colorFfff
        : ColorsUtils.color0052;
  }
}

class BarBottom extends PreferredSize {
  const BarBottom(
      {super.key, required super.preferredSize, required super.child});
}
